<template>
	<div class="home">
		<div class="home-warpper">
			<header class="home-header clear">
				<img class="header-title pull-left" src="./img/header-title.png"/>
				<div class="header-info pull-right">
					<div class="user-info pull-left">
						<Icon type="person"></Icon>
						<span class="user-name">
							{{User.userName}}
						</span>
					</div>
					<div class="user-psw pull-left" @click="changePsw">
						修改密码
					</div>
					<div class="home-back pull-left" @click="homeBack">
						首页
					</div>
					<div class="user-back pull-left" @click="userBack">
						退出
					</div>
				</div>
			</header>
			<div class="home-content" v-if="Role">
				<div class="home-menu">
					<div class="menu-header">
						菜单
					</div>
					<div class="menu-warpper">
						<Menu class="menu-content" :open-names="menuActive.open" :active-name="$route.path" @on-select="menuChange">
							<Submenu v-for="(item, index) in Role.menu" :name="index">
								<template slot="title">
									<Icon :type="item.iconClass"></Icon>
									{{item.name}}
								</template>
								<MenuItem v-for="items in item.children" :name="items.url" >{{items.name}}</MenuItem>
							</Submenu>
						</Menu>
					</div>
				</div>
				<div class="home-title">
					<base-title :title="menuActive.name"></base-title>
				</div>
				<div class="home-view">
					<router-view></router-view>
				</div>
			</div>
		</div>

		<info-modal class="psw-modal" title="修改密码" ref="psw-modal">
			<div class="psw-form">
				<Form 
					ref="pswForm" 
					:model="pswForm" 
					:rules="pswRule" 
					:label-width="70">
					<FormItem label="原密码" prop="oldPsw">
						<Input type="password" v-model="pswForm.oldPsw"></Input>
					</FormItem>
					<FormItem label="新密码" prop="newPsw">
						<Input type="password" v-model="pswForm.newPsw"></Input>
					</FormItem>
					<FormItem label="确认密码" prop="surePsw">
						<Input type="password" v-model="pswForm.surePsw"></Input>
					</FormItem>
					<FormItem>
						<Button type="primary" @click="pswCommit">提交</Button>
						<Button type="ghost" @click="pswReset" style="margin-left: 8px">重置</Button>
					</FormItem>
				</Form>
			</div>
		</info-modal>
		
		<loading v-show="showLoading"></loading>
	</div>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex';
	import { infoModalMixin, baseTitleMixin, loadingMixin } from 'common/js/mixins';
	import { changePswRule } from 'common/js/rules';
	import { userStorageName } from 'common/js/config';
	import { removeLocalStorage, errorNotice } from 'common/js/dom';
	import { getRole, changePsw } from 'api/home';

	export default {
		mixins: [infoModalMixin, baseTitleMixin, loadingMixin],
		computed: {
			menuActive() {
				let arr = [];
				let str = '';
				switch(this.$route.path) {
					case '/home/Application':
						arr[0] = 0;
						str = '应用系统管理';
						break;
					case '/home/Interface':
						arr[0] = 1;
						str = '接口管理';
						break;
					case '/home/ModificationLog':
						arr[0] = 1;
						str = '修改日志';
						break;
					case '/home/InterfaceLog':
						arr[0] = 1;
						str = '接口请求日志';
						break;
					case '/home/ApplicationService':
						arr[0] = 2;
						str = '应用系统服务';
						break;
					case '/home/ServiceLog':
						arr[0] = 2;
						str = '服务日志';
						break;
					case '/home/Task':
						arr[0] = 3;
						str = '任务日志';
						break;
					case '/home/DataSource':
						arr[0] = 3;
						str = '数据源管理';
						break;
					case '/home/TaskConfig':
						arr[0] = 3;
						str = '任务配置';
						break;
					case '/home/Document':
						arr[0] = 4;
						str = '文档管理';
						break;
					case '/home/ServiceMonitor':
						arr[0] = 5;
						str = '服务器监控';
						break;
					case '/home/RedisMonitor':
						arr[0] = 5;
						str = 'Redis监控';
						break;
					case '/home/User':
						arr[0] = 6;
						str = '用户管理';
						break;
					case '/home/Role':
						arr[0] = 6;
						str = '角色管理';
						break;
				}
				return {
					open: arr,
					name: str
				};
			},
			...mapGetters([
				'User',
				'Role'
			])
		},
		created() {
			this._getRole();
		},
		data() {
			return {
				pswForm: {
					oldPsw: '',
					newPsw: '',
					surePsw: ''
				},
				pswRule: changePswRule(this),
				showLoading: false
			}
		},
		methods: {
			pswCommit() {
				this.$refs['pswForm'].validate((valid) => {
                    if (valid) {
                        this._changePsw()
                    }
                })
			},
			pswReset() {
				this.$refs['pswForm'].resetFields();
			},
			changePsw() {
				this.$refs['psw-modal'].showModal();
			},
			homeBack() {
				this.$router.push('/');
			},
			userBack() {
				this.SET_USER({});
				removeLocalStorage(userStorageName);
				this.$router.push('/login');
			},
			menuChange(name) {
				this.$router.push(name);
			},
			_changePsw() {
				this.showLoading = true;
				changePsw(this.pswForm)
					.then(res => {
						this.showLoading = false;
					}).catch(res => {
						errorNotice(res.message);
						this.showLoading = false;
					});
			},
			_getRole() {
				this.showLoading = true;
				getRole()
					.then(res => {
						this.SET_ROLE(res);
						this.showLoading = false;
					}).catch(res => {
						errorNotice(res.message);
						this.showLoading = false;
					});
			},
			...mapMutations([
				'SET_USER',
				'SET_ROLE'
			])
		}
	}
</script>

<style lang="scss">
	@import '~common/scss/color';
	.home {
		width: 100%;
		height: 100%;
		.home-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			.home-header {
				height: 40px;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				background-image: url(./img/header-bg.png);
				background-size: cover;
				user-select: none;
				.header-title {
					margin-top: 4px;
				}
				.header-info {
					color: white;
					font-size: 14px;
					.user-info {
						height: 30px;
						margin-top: 5px;
						margin-right: 8px;
						padding: 0 30px;
						border-radius: 20px;
						background-color: rgba(0, 0, 0, .4);
						text-align: center;
						line-height: 30px;
						.user-name {
							margin-left: 5px;
						}
					}
					.user-psw,
					.home-back,
					.user-back {
						height: 100%;
						line-height: 40px;
						margin-right: 8px;
						cursor: pointer;
					}
				}
			}
			.home-content {
				position: fixed;
				top: 40px;
				bottom: 0;
				left: 0;
				right: 0;
				.home-menu {
					width: 200px;
					height: 100%;
					position: relative;
					.menu-header {
						line-height: 30px;
						padding-left: 10px;
						font-weight: 700;
						background-color: $color-default;
						color: white;
						font-size: 14px;
					}
					.menu-warpper {
						width: 100%;
						height: calc(100% - 30px);
						overflow: auto;
						user-select: none;
						.menu-content {
							width: 100% !important;
							min-height: 100%;
							&.ivu-menu-vertical .ivu-menu-item,
							&.ivu-menu-vertical .ivu-menu-submenu-title {
								padding: 8px 16px;
							}
							&.ivu-menu-vertical .ivu-menu-submenu-title {
								background-color: #f3f3f3;
							}
						}
					}
				}
				.home-title {
					height: 30px;
					position: fixed;
					top: 40px;
					left: 200px;
					right: 0;
					overflow: hidden;
					padding-left: 5px;
				}
				.home-view {
					position: fixed;
					top: 70px;
					bottom: 0;
					left: 200px;
					right: 0;
					overflow: hidden;
				}
			}
		}
	}
	
	.psw-modal {
		.ivu-modal {
			width: 400px;
		}
		.psw-form {
			width: 300px;
			margin: auto;
		}
	}
</style>